<template>
  <page class="product-execu-order">
    <template slot="title">
      <a class="float-right" @click="getTableData">刷新</a>
      <label style="margin-right: 10px">工序工单列表</label>
      <p-button v-show="selectedRowKeys.length > 0" @click="patchStart">批量开工</p-button>
    </template>
    <p-spin :spinning="loading">
      <ul v-show="dataSource.length" class="list">
        <li
          v-for="item in dataSource"
          :key="item.id"
          :class="{active: currentItem && currentItem.id === item.id}"
          @click="onClickItem(item)"
        >
          <p-row :gutter="10" type="flex" align="middle" justify="center">
            <p-col :xl="2">
              <p-checkbox :checked="selectedRowKeys.includes(item.id)" @change="onRowSelectionChange(item.id)" @click.native.stop />
            </p-col>
            <p-col :xl="11">
              <p class="text-ellipsis" :title="item.processBillNo">{{ item.processBillNo }}</p>
              <p class="text-ellipsis" :title="item.productname">{{ item.productname }}</p>
            </p-col>
            <p-col :xl="7">
              <p>{{ item.planQty }}PCS</p>
              <p>{{ timestampToDatetime(item.starttime, 2) }}</p>
            </p-col>
            <p-col :xl="4">
              <p-tag v-if="item.billnoStatus === 3" color="red">已暂停</p-tag>
              <p-tag v-else-if="item.billnoStatus === 2" color="blue">开工中</p-tag>
              <p-button v-else-if="item.startworkButtonFlag" type="primary" @click.native.stop="onStart(item)">开工</p-button>
            </p-col>
          </p-row>
        </li>
      </ul>
      <p-empty v-if="!dataSource || !dataSource.length" :image="simpleImage" />
    </p-spin>
    <p-modal
      v-model="visible"
      :width="600"
      :closable="false"
      :mask-closable="false"
      title="开工失败"
    >
      <p
        v-for="item in errors"
        :key="item.processBillNo"
      >
        工序工单<span style="color: red"> {{ item.processBillNo }} </span>开工验证失败，失败原因：<span style="color: red">{{ item.errorMsg }}</span>
      </p>
      <template slot="footer">
        <p-button type="primary" @click="visible = false">确定</p-button>
      </template>
    </p-modal>
  </page>
</template>

<script>
import Page from './page'
import { getAction, postAction } from '@/api/manage'
import { timestampToDatetime } from '@/utils/util'
import { Empty } from 'poros/ui/lib'

export default {
  components: {
    Page
  },
  props: {
    params: Object
  },
  data() {
    return {
      visible: false,
      errors: [],
      loading: false,
      dataSource: [],
      selectedRowKeys: [],
      currentItem: null
    }
  },
  watch: {
    params: {
      deep: true,
      handler() {
        this.getTableData()
      }
    }
  },
  beforeCreate() {
    this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE
  },
  mounted() {
    this.getTableData()
  },
  methods: {
    timestampToDatetime,
    getTableData() {
      this.loading = true
      getAction('/mes-manufacture/mfStartWork/getProcessbillNoList', this.params || {}).then(res => {
        this.dataSource = res.data || []
        this.loading = false
      })
    },
    onRowSelectionChange(id) {
      const idx = this.selectedRowKeys.findIndex(val => val === id)
      if (idx === -1) {
        this.selectedRowKeys.push(id)
      } else {
        this.selectedRowKeys.splice(idx, 1)
      }
    },
    onClickItem(item) {
      this.currentItem = item
      this.$emit('on-item-click', item)
    },
    onStart(item) {
      const data = [{
        id: item.id,
        inspectFlag: item.inspectFlag
      }]
      this.onConfirm('确定要开工吗？', data)
    },
    patchStart() {
      const data = []
      this.dataSource.forEach(item => {
        if (this.selectedRowKeys.includes(item.id)) {
          data.push({
            id: item.id,
            inspectFlag: item.inspectFlag
          })
        }
      })
      if (data.length) {
        this.onConfirm('确定要批量开工吗？', data)
      } else {
        this.$message.warning('请先选择工序工单')
      }
    },
    onConfirm(content, data) {
      this.$confirm({
        content,
        onOk: () => {
          postAction('/mes-manufacture/mfStartWork/batchStartWork', data).then(res => {
            if (res.code === 0) {
              if (res.data && res.data.length) {
                this.visible = true
                this.errors = res.data
              } else {
                this.$message.success('开工成功')
                this.getTableData()
                this.$emit('success')
              }
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
  .product-execu-order {
    height: 100%;
    overflow: auto;
    
    .list {
      li {
        padding: 10px;
        border: 1px solid #ECEDF0;
        overflow: hidden;

        &:hover,
        &.active {
          background-color: #f0f6ff;
        }

        + li {
          margin-top: 10px;
        }
      }
    }
  }
</style>